<template>
  <div class="w-100 h-100 flex-vertical">
    <div class="header-wrapper flex-header flex-item align-items-center justify-content-between mb-4 py-2-5 px-3 text-zero">
      <div class="flex-content d-flex align-items-center text-md">
        <div class="input-box flex-center-center">
          <svg t="1683719379419" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6853" width="1.6rem" height="1.6rem">
            <path
              d="M797.525333 752.266667c62.069333-72.736 97.28-165.002667 97.28-262.186667C894.816 266.528 713.621333 85.333333 490.08 85.333333 266.538667 85.333333 85.333333 266.538667 85.333333 490.069333 85.333333 713.610667 266.538667 894.826667 490.069333 894.826667a404.693333 404.693333 0 0 0 118.208-17.546667 32 32 0 0 0-18.666666-61.216 340.693333 340.693333 0 0 1-99.541334 14.762667C301.888 830.816 149.333333 678.261333 149.333333 490.069333 149.333333 301.888 301.888 149.333333 490.069333 149.333333 678.261333 149.333333 830.826667 301.888 830.826667 490.069333c0 89.28-35.381333 173.696-97.141334 237.322667a36.992 36.992 0 0 0 0.384 51.925333l149.973334 149.973334a32 32 0 0 0 45.258666-45.248L797.525333 752.266667z"
              fill="#000000"
              p-id="6854"
            ></path>
          </svg>
          <span class="ml-2">搜索</span>
        </div>
      </div>
      <div class="flex-label flex-center-center">
        <div class="icon-box mr-3">
          <img class="w-100 h-100" src="@img/home/star.png" alt="" />
        </div>
        <div class="icon-box">
          <img class="w-100 h-100" src="@img/home/my.png" alt="" />
        </div>
      </div>
    </div>
    <div class="flex-content pb-3 no-scroll text-center color-gray">
      <div class="text-mini">我的家</div>
      <div class="flex-center-center mt-2 mb-1">
        <div class="avatar-box overflow-hidden p-2">
          <img class="w-100" src="@img/home/header.png" alt="" />
        </div>
      </div>
      <div class="text-md">welcome</div>
      <div class="px-3 mt-3">
        <div class="d-flex align-items-center justify-content-between text-alert">
          <div class="tab-item flex-vertical justify-content-center align-items-center">
            <img src="@img/home/icon1.png" alt="" />
            <div class="mt-1">行为训练</div>
          </div>
          <div class="tab-item flex-vertical justify-content-center align-items-center">
            <img src="@img/home/icon2.png" alt="" />
            <div class="mt-1">养猫须知</div>
          </div>
          <div class="tab-item flex-vertical justify-content-center align-items-center">
            <img src="@img/home/icon3.png" alt="" />
            <div class="mt-1">记录</div>
          </div>
        </div>
        <div class="text-md color-white mt-2">
          <div class="button button1 flex-center-center py-4 mt-3">
            <div class="mr-2">养宠工具</div>
            <img src="@img/home/tool.png" alt="" />
          </div>
          <div class="button button2 flex-center-center py-4 mt-3">
            <div class="mr-2">疾病自查</div>
            <img src="@img/home/ill.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
@import '~@style/variable.less';

.header-wrapper {
  background-color: @bg3;
  .input-box {
    width: 14rem;
    height: 2.6rem;
    border-radius: 2.6rem;
    background: @white;
  }
  .icon-box {
    width: 2rem;
    height: 2rem;
  }

  .tab-item {
    transition: all linear 150ms;
    &.active {
      font-size: 2rem;
      font-weight: bold;
    }
  }
}

.avatar-box {
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  background-color: @bg4;
}

.tab-item {
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 0.5rem;
  border: 1px solid @gray;
  background-color: @white;
  img {
    width: 3rem;
  }
}

.button {
  border-radius: 1.5rem;
  img {
    width: 2rem;
  }
  &.button1 {
    background-color: #ffadad;
  }
  &.button2 {
    background-color: #b8b5dd;
  }
}
</style>
